<template>
  <div>
    <div class="menuview-wrapper">
      <div class="nenu-wrapper" ref="menuScroll">
        <div class="">
          <div class="item" v-for="(i,index) in goods" :class="{act:menuIndex==index}" @click="scrollTo(index)">
            {{i.name}}
          </div>
        </div>
      </div>

      <div class="food-wrapper" ref="foodScroll">
        <div class="">
          <dl v-for="foods in goods">
            <dt>{{foods.name}}</dt>
            <dd v-for="food in foods.foods">
              <img :src="food.icon" alt="">
              <div class="food-info">
                <h4>{{food.name}}</h4>
                <p class="desc" v-if="food.info">
                  {{food.info.substr(0, 20) + '...'}}</p>
                <p class="rating">
                  月售{{food.sellCount}}份 好评率{{food.rating}}
                </p>
                <p class="price">
                  <span>￥{{food.price}}</span>
                  <carButton :food="food" @ball-event="ballEvent"></carButton>
                </p>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <shopcar ref="shopCart" :selectedFoods="selectedFoods"></shopcar>
  </div>

</template>

<script>
  import shopcar from '@/components/shopcar'
  import Bscroll from 'better-scroll'
  import carButton from '@/components/carbutton'
  export default {
    data(){
      return {
        goods: {
          type: Array
        },
        heights: [],
        scrollY: 0
      }
    },
    components: {
      shopcar,
      Bscroll,
      carButton
    },
    mounted(){
//        获取数据
      this.axios.get('/api/goods').then((res) => {
        if (res.data.errno == 0) {
          this.goods = res.data.data;
          this.$nextTick(() => {
            this._initScroll();
            this._countHeight()
          });
        }
      })
    },
    methods: {
//        初始化滚动条
      _initScroll(){
        this.menuScroll = new Bscroll(this.$refs.menuScroll, {
          click: true
        });
        this.foodScroll = new Bscroll(this.$refs.foodScroll, {
          probeType: 3,
          click: true
        });
        this.foodScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
        })

      },
      _countHeight(){
        let dts = this.$refs.foodScroll.getElementsByTagName("dt");
        for (let i = 0; i < dts.length; i++) {
          this.heights.push(dts[i].offsetTop)
        }
        console.log(dts)
      },
      scrollTo(index){
        this.foodScroll.scrollTo(0, -this.heights[index], 200)
      },

//      小球事件
      ballEvent(target){
        this.$refs.shopCart.ballClick(target);
      }
    },
    computed: {
      menuIndex(){
        for (let i = 0; i < this.heights.length; i++) {
          let now = this.heights[i];
          let next = this.heights[i + 1];
          if (now >= this.scrollY && this.scrollY < next) {
            return i;
          } else if (!next) {
            return i;
          }
        }
        return 0;
      },
      selectedFoods(){
        let foods = [];
        if (this.goods.length == 0) return [];
        for (let i = 0; i < this.goods.length; i++) {
          let good = this.goods[i];
          good.foods.forEach(food => {
            if (food.count > 0) {
              foods.push(food);
            }
          })
        }
        return foods;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../static/less/var.less";

  .menuview-wrapper {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    top: @base*351rem;
    bottom: @base*96rem;
    display: flex;
    .nenu-wrapper {
      width: @base*180rem;
      height: 100%;
      background: #fff;
      .item {
        padding: @base*40rem @base*20rem;
        border-bottom: 1px solid @bc1;
        color: @fc1;
        font-size: @base*25rem;
        &.act {
          border-left: 3px solid @mc;
        }
      }
    }
    .food-wrapper {
      flex: 1;
      background-color: #fff;
      dl {
        dt {
          padding: @base*8rem @base*20rem;
          background-color: #f5f5f5;
          color: #333333;
          font-size: @base*24rem;
        }
        dd {
          display: flex;
          padding: @base*10rem @base*20rem;
          border-bottom: 1px solid @bc1;
          /*justify-content: space-between;*/
          img {
            width: @base*104rem;
            height: @base*104rem;
          }
          .food-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            color: @fc1;
            h4 {
              font-size: @base*30rem;
              color: #333;
            }
            .desc {
              font-size: @base*8rem;
              color: @fc1;
            }
            .rating {
              font-size: @base*8rem;
            }
            .price {
              color: @mc;
              font-size: @base*30rem;
              font-weight: 700;
              display: flex;
              justify-content: space-between;
            }

          }
        }
      }
    }
  }
</style>
